<%--
  Created by IntelliJ IDEA.
  User: 俊杰
  Date: 4/8/2022
  Time: 6:44 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn1").click(function(){
                $.ajax({
                    url: "send/array/one.html",         //请求目标资源的地址
                    type: "post",                   //请求方式
                    data: {
                        array: [5,8,12]             //要发送的请求参数
                    },
                    dataType: "text",               //如何对待服务器端返回的数据
                    success: function(response){    //服务器端成功处理请求后调用的回调函数，response是响应体数据
                       alert(response)
                    },
                    error: function (response){     //服务器端处理请求失败后调用的回调函数，response是响应体数据
                        alert(response)
                    }
                })
            });

            $("#btn2").click(function(){
                $.ajax({
                    url: "send/array/two.html",         //请求目标资源的地址
                    type: "post",                   //请求方式
                    data: {
                        'array[0]': 5,                   //要发送的请求参数
                        'array[1]': 8,
                        'array[2]': 12
                    },
                    dataType: "text",               //如何对待服务器端返回的数据
                    success: function(response){    //服务器端成功处理请求后调用的回调函数，response是响应体数据
                        alert(response)
                    },
                    error: function (response){     //服务器端处理请求失败后调用的回调函数，response是响应体数据
                        alert(response)
                    }
                })
            });

            $("#btn3").click(function(){
                //准备好要发送到服务器端的数组
                var array = [5,8,12]
                console.log(array.length)
                //将JSON数组转换为JSON字符串
                var requestBody = JSON.stringify(array)
                console.log(requestBody.length,requestBody)


                $.ajax({
                    url: "send/array/three.html",         //请求目标资源的地址
                    type: "post",                   //请求方式
                    data: requestBody,              //请求体
                    contentType: "application/json;charset=UTF-8",  //设置请求体的内容类型，告诉服务器端本次请求的请求体是JSON数据

                    dataType: "text",               //如何对待服务器端返回的数据
                    success: function(response){    //服务器端成功处理请求后调用的回调函数，response是响应体数据
                        alert(response)
                    },
                    error: function (response){     //服务器端处理请求失败后调用的回调函数，response是响应体数据
                        alert(response)
                    }
                })
            });

            $("#btn4").click(function (){
                //准备要发送的数据
                var student = {
                    stuId: 5,
                    stuName: "zhangjunjie",
                    address: {
                        province: "Anhui",
                        city: "FuYang",
                        street: "JiaoPo Town"
                    },
                    subjectList: [
                        {
                            subjectName: "JavaSE",
                            subjectScore: 100
                        },
                        {
                            subjectName: "DataStructure",
                            subjectScore: 99
                        }
                    ],
                    map:{
                        k1: 'v1',
                        k2: 'v2'
                    }
                };
                //将JSON对象转换为JSON字符串
                var requestBody = JSON.stringify(student);
                //发送Ajax请求
                $.ajax({
                    url: "send/compose/object.json",
                    type: "post",
                    data: requestBody,
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(response){
                        console.log(response)
                    },
                    error: function (response){
                        console.log(response)
                    }
                });
            });
            $("#btn5").click(function(){

              layer.msg("玩命提示中……")

            })
        });
    </script>
</head>
<body>
    <a href="${pageContext.request.contextPath}/test/ssm.html">测试SSM整合环境</a>

    <br>
    <button id="btn1">Send [5,8,12] one</button><br>
    <button id="btn2">Send [5,8,12] two</button><br>
    <button id="btn3">Send [5,8,12] three</button><br>
    <button id="btn4">Send Compose Object</button><br>
    <button id="btn5">点我弹框</button>
</body>
</html>